<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username" placeholder="用户名"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" placeholder="密码"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" onclick="login()" value="提交" /></td>
            </tr>
        </table>
    </form>
<script>
    //javascript : js

    // 找到方法承载体 的事件
    function login(){
        // 找到被调用对象
        let username = document.getElementsByName("username")[0].value;
        let password = document.getElementsByName("password")[0].value;
        //你想做什么

        //ajax
        ajax("/login/login?username="+username+"&password="+password,null,function (d){
            //d 接收到的后台数据
            let json = JSON.parse(d);
            if(json.code == 200){
                // ../../../ ./
                //存储网页的session缓存当中
                sessionStorage.setItem("userid",json.data)
                location.href = "./main.html";
            }else{
                alert("登陆失败");
            }
        })
        return false;
    }

    function ajax(url,data,callback){
        let req = new XMLHttpRequest();
        req.open("post",url,true);
        req.onreadystatechange=function (){
            if(req.readyState==4&&req.status==200){
                callback(req.responseText);
            }
        }
        //默认采用的RequetBody来传递的 - > controller - @RequestBody
        req.send(data);
    }
</script>
</body>
</html>